<template>
  <view :class="[`${prefixCls}-question-container`]">
    <uv-popup ref="popup" closeable round="18" class="question-popup" :customStyle="{ overflow: 'visible' }">
      <view class="question-bg">
        <view class="position-title">问卷调查</view>
        <view class="question-content">{{ questionInfo?.alert_topic || '' }}</view>
        <view class="question-btn">
          <image class="question-img" :src="$CDN('/customer/static/images/activity/question_btn.png')" @click="toQuestionPage" />
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import { getStorageCache, setStorageCache } from '@/common/cache'
import { mapState } from 'vuex'
export default {
  name: 'cuQuestion',
  props: {},
  data() {
    return {}
  },
  watch: {
    questionInfo: {
      immediate: false,
      handler(nv) {
        // 避免重复弹出
        if (nv.questionnaire_id != getStorageCache('isShowQuestion')?.questionnaire_id) {
          this.$nextTick(() => {
            this.$refs.popup.open()
            setStorageCache('isShowQuestion', { ...nv })
          })
        }
      },
    },
  },
  computed: {
    ...mapState('app', ['questionInfo']),
  },
  methods: {
    toQuestionPage() {
      this.$ROUTE.go('/pages/subpackage/questionnaire/detail', { id: this.questionInfo.questionnaire_id })
    },
  },
  created() {},
}
</script>

<style lang="scss" scoped>
.#{prefixCls('question-container')} {
  position: relative;
  .question-bg {
    width: 500rpx;
    height: 548rpx;
    background: #{cdn('/customer/static/images/activity/question_bg.png')} no-repeat;
    background-size: cover;
    padding-top: 220rpx;
    box-sizing: border-box;
    position: relative;
    .position-title {
      // margin-top: 100rpx;
      text-align: center;
      font-size: 60rpx;
      font-weight: bold;
      position: relative;
    }
    .question-content {
      padding: 30rpx;
      line-height: 40rpx;
    }
    .question-btn {
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: -120rpx;
      .question-img {
        width: 300rpx;
        height: 96rpx;
      }
    }
  }
}
</style>
